<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            font-size: 35px;
        }
        .box {
            margin: 0 auto;
            width: 600px;
            height: 1000px;
        }
        .con{
            margin: 0 auto; 
            width: 100%;
            background-color: antiquewhite;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        input {
            height: 20%;
            width: 100%;
            border-radius: 5px;
            background-color: rgb(154, 139, 139);
        }
        button{
            margin: 2%;
            height: 80px;
            width: 20%;
            color: black;
            background-color: #989191;
            border-radius: 20px;
        }
        button:active{
            background-color: rgb(51, 45, 45);
        }
    </style>
</head>

<body>
    <div class="box">
        <input type="text" id="inp" disabled>
        <div class="con">
            <button onclick="cls()">C</button>
            <button onclick="back()">CE</button>
            <button onclick="addStr('%')">%</button>
            <button onclick="addStr('/')">/</button>
            <button onclick="addStr(7)">7</button>
            <button onclick="addStr(8)">8</button>
            <button onclick="addStr(9)">9</button>
            <button onclick="addStr('*')">*</button>
            <button onclick="addStr(4)">4</button>
            <button onclick="addStr(5)">5</button>
            <button onclick="addStr(6)">6</button>
            <button onclick="addStr('-')">-</button>
            <button onclick="addStr(1)">1</button>
            <button onclick="addStr(2)">2</button>
            <button onclick="addStr(3)">3</button>
            <button onclick="addStr('+')">+</button>
            <button onclick=""></button>
            <button onclick="addStr(0)">0</button>
            <button onclick="addStr('.')">.</button>
            <button onclick="calc()">=</button>
        </div>
    </div>

    <script>
        function addStr(s){
            var inp = document.querySelector('#inp')
            inp.value = inp.value + s
        }

        function calc(){
            var inp = document.querySelector('#inp')
            val = eval(inp.value)
            inp.value = val
        }

        function cls(){
            var inp = document.querySelector('#inp')
            inp.value = ""
        }

        function back(){
            var inp = document.querySelector('#inp')
            var str = inp.value.substr(0,inp.value.length - 1)
            inp.value = str
        }
    </script>
</body>

</html>